<template>
  <view class="container">
    <view class="avatar commonstyle" @click="chooseuseravatar">
      <view>头像</view>
      <image :src="userinfo.avatar" mode="aspectFill" style="width: 88rpx; height: 88rpx; border-radius: 50%"></image>
    </view>
    <view class="commonstyle gender">
      <view>
        昵称
        <text class="commontip">*</text>
      </view>
      <view style="display: flex">
        <input type="text" style="text-align: right; font-size: 28rpx" :maxlength="20" @blur="nickname" placeholder="请输入" v-model="userinfo.nickname" />
      </view>
    </view>
    <view class="commonstyle gender" @click="choosegender">
      <view>
        性别
        <text class="commontip">*</text>
      </view>
      <view style="display: flex">
        <view style="font-size: 28rpx; margin-right: 10rpx">{{ userinfo.gender == 1 ? '男' : '女' || '男' }}</view>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
    </view>
    <view class="commonstyle gender" @click="chooseburndate">
      <view>
        出生年月
        <text class="commontip">*</text>
      </view>
      <view style="display: flex">
        <view style="font-size: 28rpx; margin-right: 10rpx">{{ userinfo.birthday || '请选择' }}</view>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
    </view>
    <view class="commonstyle gender">
      <view>
        联系方式
        <text class="commontip">*</text>
      </view>
      <view style="display: flex">
        <input type="text" style="text-align: right; font-size: 28rpx" :maxlength="11" @blur="savephone" placeholder="请输入" v-model="userinfo.phone" />
        <uni-icons type="right" size="20"></uni-icons>
      </view>
    </view>
    <view class="commonstyle gender" @click="$refs.tailRef.open()">
      <view>
        身高
        <text class="commontip">*</text>
      </view>
      <view style="display: flex">
        <view style="font-size: 28rpx; margin-right: 10rpx">{{ userinfo.height + 'cm' || '请选择' }}</view>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
    </view>
    <view class="commonstyle gender" @click="$refs.leavalRef.open()">
      <view>
        学历
        <text class="commontip">*</text>
      </view>
      <view style="display: flex">
        <view style="font-size: 28rpx; margin-right: 10rpx">
          {{
            userinfo.education == 1
              ? '高中及以下'
              : userinfo.education == 2
              ? '大专'
              : userinfo.education == 3
              ? '本科'
              : userinfo.education == 4
              ? '硕士'
              : userinfo.education == 5
              ? '硕士以上'
              : '' || '请选择'
          }}
        </view>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
    </view>
    <view class="commonstyle gender">
      <view>
        毕业院校
        <text class="commontip">*</text>
      </view>
      <view style="display: flex">
        <input type="text" style="text-align: right; font-size: 28rpx" :maxlength="20" @blur="saveschool" placeholder="请输入" v-model="userinfo.school" />
      </view>
    </view>
    <view class="commonstyle gender" @click="$refs.mearrRef.open()">
      <view>
        婚姻状况
        <text class="commontip">*</text>
      </view>
      <view style="display: flex">
        <view style="font-size: 28rpx; margin-right: 10rpx">{{ userinfo.marital || '请选择' }}</view>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
    </view>
    <view class="commonstyle gender" @click="$refs.carerrRef.open()">
      <view>
        职业
        <text class="commontip">*</text>
      </view>
      <view style="display: flex">
        <view style="font-size: 28rpx; margin-right: 10rpx">{{ userinfo.career || '请选择' }}</view>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
    </view>
    <view class="commonstyle gender">
      <view>
        公司
        <text class="commontip">*</text>
      </view>
      <view style="display: flex">
        <input type="text" style="text-align: right; font-size: 28rpx" :maxlength="20" @blur="savecompaney" placeholder="请输入" v-model="userinfo.company" />
      </view>
    </view>
    <view class="commonstyle gender" @click="$refs.areaRef.open()">
      <view>
        现居住地
        <text class="commontip">*</text>
      </view>
      <view style="display: flex">
        <view style="font-size: 28rpx; margin-right: 10rpx">{{ userinfo.residence_province + '-' + userinfo.residence_city }}</view>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
    </view>
    <!-- 选择头像 -->
    <!--  <uni-popup ref="avatarRef" type="bottom">
      <view class="imagebox">
        <view class="imageboxitem">拍摄</view>
        <view class="imageboxitem" @click="chooseuseravatar">从手机相册选择</view>
        <view @click="$refs.avatarRef.close()" class="imageboxitem">取消</view>
      </view>
    </uni-popup> -->
    <!--  性别选择 -->
    <uni-popup ref="genderRef" type="bottom">
      <view class="genderbox">
        <view class="genderboxtitle">
          <view style="font-size: 32rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; margin: 40rpx 0 0 312rpx">性别选择</view>
          <uni-icons type="closeempty" size="20" style="margin: 44rpx 0 0 224rpx" @click="$refs.genderRef.close()"></uni-icons>
        </view>
        <picker-view indicator-style="height: 50px;" :value="0" @change="bindChange" style="height: 300rpx">
          <picker-view-column>
            <view style="text-align: center; line-height: 100rpx" v-for="(item, index) in genderlist" :key="index">{{ item }}</view>
          </picker-view-column>
        </picker-view>
        <button class="btngender" @click="fnokgender">确定</button>
      </view>
    </uni-popup>
    <!-- 出生日期选择 -->
    <uni-popup ref="burnRef" type="bottom">
      <view class="genderbox">
        <view class="genderboxtitle">
          <view style="font-size: 32rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; margin: 40rpx 0 0 280rpx">选择出生日期</view>
          <uni-icons type="closeempty" size="20" style="margin: 44rpx 0 0 224rpx" @click="$refs.burnRef.close()"></uni-icons>
        </view>
        <picker-view indicator-style="height: 50px;" :value="burndate" @change="burndateChange" style="height: 300rpx">
          <picker-view-column>
            <view style="line-height: 100rpx; text-align: center" v-for="(item, index) in years" :key="index">{{ item }}年</view>
          </picker-view-column>
          <picker-view-column>
            <view style="line-height: 100rpx; text-align: center" v-for="(item, index) in months" :key="index">{{ item }}月</view>
          </picker-view-column>
        </picker-view>
        <button class="btngender" @click="fnokburn">确定</button>
      </view>
    </uni-popup>
    <!-- 选择身高 -->
    <uni-popup ref="tailRef" type="bottom">
      <view class="genderbox">
        <view class="genderboxtitle">
          <view style="font-size: 32rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; margin: 40rpx 0 0 312rpx">性别选择</view>
          <uni-icons type="closeempty" size="20" style="margin: 44rpx 0 0 224rpx" @click="$refs.tailRef.close()"></uni-icons>
        </view>
        <picker-view indicator-style="height: 50px;" :value="0" @change="tallchange" style="height: 300rpx">
          <picker-view-column>
            <view style="text-align: center; line-height: 100rpx" v-for="(item, index) in tallList" :key="index">{{ item }}</view>
          </picker-view-column>
        </picker-view>
        <button class="btngender" @click="fnoktail">确定</button>
      </view>
    </uni-popup>
    <!-- 选择学历 -->
    <uni-popup ref="leavalRef" type="bottom">
      <view class="genderbox">
        <view class="genderboxtitle">
          <view style="font-size: 32rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; margin: 40rpx 0 0 312rpx">选择学历</view>
          <uni-icons type="closeempty" size="20" style="margin: 44rpx 0 0 224rpx" @click="$refs.leavalRef.close()"></uni-icons>
        </view>
        <picker-view indicator-style="height: 50px;" :value="0" @change="leavalchange" style="height: 300rpx">
          <picker-view-column>
            <view style="text-align: center; line-height: 100rpx" v-for="(item, index) in leavalList" :key="index">{{ item }}</view>
          </picker-view-column>
        </picker-view>
        <button class="btngender" @click="fnokeducation">确定</button>
      </view>
    </uni-popup>
    <!-- 婚姻状况 -->
    <uni-popup ref="mearrRef" type="bottom">
      <view class="genderbox">
        <view class="genderboxtitle">
          <view style="font-size: 32rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; margin: 40rpx 0 0 312rpx">选择学历</view>
          <uni-icons type="closeempty" size="20" style="margin: 44rpx 0 0 224rpx" @click="$refs.mearrRef.close()"></uni-icons>
        </view>
        <picker-view indicator-style="height: 50px;" :value="0" @change="mearrchange" style="height: 300rpx">
          <picker-view-column>
            <view style="text-align: center; line-height: 100rpx" v-for="(item, index) in mearrList" :key="index">{{ item }}</view>
          </picker-view-column>
        </picker-view>
        <button class="btngender" @click="fnokmarray">确定</button>
      </view>
    </uni-popup>
    <!-- 选择职业 -->
    <uni-popup ref="carerrRef" type="bottom">
      <view class="genderbox">
        <view class="genderboxtitle">
          <view style="font-size: 32rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; margin: 40rpx 0 0 312rpx">选择职业</view>
          <uni-icons type="closeempty" size="20" style="margin: 44rpx 0 0 224rpx" @click="$refs.carerrRef.close()"></uni-icons>
        </view>
        <picker-view indicator-style="height: 50px;" :value="0" @change="carerrchange" style="height: 300rpx">
          <picker-view-column>
            <view style="text-align: center; line-height: 100rpx" v-for="(item, index) in careerList" :key="index">{{ item }}</view>
          </picker-view-column>
        </picker-view>
        <button class="btngender" @click="fnokcarrerd">确定</button>
      </view>
    </uni-popup>
    <!-- 选择地区 -->
    <uni-popup ref="areaRef" type="bottom">
      <view class="genderbox">
        <view class="genderboxtitle">
          <view style="font-size: 32rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; margin: 40rpx 0 0 312rpx">选择地区</view>
          <uni-icons type="closeempty" size="20" style="margin: 44rpx 0 0 224rpx" @click="$refs.areaRef.close()"></uni-icons>
        </view>
        <picker-view indicator-style="height: 50px;" :value="place" @change="areachange" style="height: 300rpx">
          <picker-view-column>
            <view style="line-height: 100rpx; text-align: center" v-for="(item, index) in provinceData" :key="index">{{ item.name }}</view>
          </picker-view-column>
          <picker-view-column>
            <view style="line-height: 100rpx; text-align: center" v-for="(item, index) in cityData[0].city" :key="index">{{ item.name }}</view>
          </picker-view-column>
        </picker-view>
        <button class="btngender" @click="fnokarea">确定</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import provinceData from './component/data.js';
export default {
  data() {
    const date = new Date();
    const years = [];
    const year = date.getFullYear();
    const months = [];
    const month = date.getMonth() + 1;
    for (let i = 1980; i <= date.getFullYear(); i++) {
      years.push(i);
    }
    for (let i = 1; i <= 12; i++) {
      months.push(i);
    }
    return {
      years,
      year,
      months,
      month,
      burndate: [9999, month - 1],
      place: [0, 1], // 选择市区
      tallList: [
        '140cm',
        '141cm',
        '142cm',
        '143cm',
        '144cm',
        '145cm',
        '146cm',
        '147cm',
        '148cm',
        '149cm',
        '150cm',
        '151cm',
        '152cm',
        '153cm',
        '154cm',
        '155cm',
        '156cm',
        '157cm',
        '158cm',
        '159cm',
        '160cm',
        '161cm',
        '162cm',
        '163cm',
        '164cm',
        '165cm',
        '166cm',
        '167cm',
        '168cm',
        '169cm',
        '170cm',
        '171cm',
        '172cm',
        '173cm',
        '174cm',
        '175cm',
        '176cm',
        '177cm',
        '178cm',
        '179cm',
        '180cm',
        '181cm',
        '182cm',
        '183cm',
        '184cm',
        '185cm',
        '186cm',
        '187cm',
        '188cm',
        '189cm',
        '190cm',
        '191cm',
        '192cm',
        '193cm',
        '194cm',
        '195cm',
        '196cm',
        '197cm',
        '198cm',
        '199cm',
        '200cm',
        '201cm',
        '202cm',
        '203cm',
        '204cm',
        '205cm',
        '206cm',
        '207cm',
        '208cm',
        '209cm',
        '210cm',
        '211cm',
        '212cm',
        '213cm',
        '214cm',
        '215cm',
        '216cm',
        '217cm',
        '218cm',
        '219cm',
        '220cm',
        '221cm',
        '222cm',
        '223cm',
        '224cm',
        '225cm',
        '226cm',
        '227cm',
        '228cm',
        '229cm',
        '230cm',
        '231cm',
        '232cm',
        '233cm',
        '234cm',
        '235cm',
        '236cm',
        '237cm',
        '238cm',
        '239cm'
      ], // 身高列表
      leavalList: ['', '高中及以下', '大专', '本科', '硕士', '硕士以上'], // 学历列表
      genderlist: ['', '男', '女'], // 性别
      mearrList: ['', '未婚', '已婚', '离异'], // 婚姻状况
      careerList: ['', '务农', '经商', '国企'], // 职业
      visible: false, // 控制性别选择器的显示
      userinfo: {
        nickname: '', //昵称
        avatar: '', // 头像
        gender: '', // 性别
        birthday: '', // 生日
        phone: '', // 手机号
        height: '', // 身高
        education: '', // 学位
        school: '', // 毕业院校
        marital: '', // 婚姻状况
        career: '', // 职业
        company: '', // 公司
        residence_province: '', // 现居省
        residence_city: '' // 现居城市
      },
      provinceData: []
    };
  },
  onLoad() {
    this.userinfo = JSON.parse(uni.getStorageSync('userdata') || '{}');
    this.getuserinfo();
    this.provinceData = provinceData;
  },

  methods: {
    // 获取个人信息
    async getuserinfo() {
      const res = await uni.$http.post('user/index', {
        user_id: JSON.parse(uni.getStorageSync('userinfo')).user_id,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });

      this.userinfo = res.data.data;
      this.userinfo.birthday = this.userinfo.birthday.split('-')[0] + '-' + this.userinfo.birthday.split('-')[1];
    },
    // 用户选择头像
    chooseuseravatar() {
      uni.chooseMedia({
        count: 1,
        mediaType: ['image', 'video'],
        sourceType: ['album', 'camera'],
        maxDuration: 30,
        camera: 'back',
        success: (res) => {
          uni.uploadFile({
            url: 'https://activity.jiangkukeji.cn/api/common/upload', //仅为示例，非真实的接口地址
            filePath: res.tempFiles[0].tempFilePath,
            name: 'file',
            formData: {
              token: JSON.parse(uni.getStorageSync('userinfo') || '{}').token
            },
            success: (res) => {
              const data = JSON.parse(res.data);

              uni.$http.post('user/profile', {
                avatar: data.data.fullurl,
                token: JSON.parse(uni.getStorageSync('userinfo') || '{}').token
              });
              this.userinfo.avatar = data.data.fullurl;
            }
          });
        }
      });
    },
    // 选择性别
    choosegender() {
      this.$refs.genderRef.open();
      this.visible = true;
    },
    // picker性别切换
    bindChange(event) {
      this.userinfo.gender = this.genderlist[event.detail.value];
    },
    // 确定性别
    async fnokgender() {
      await uni.$http.post('user/profile', {
        gender: this.userinfo.gender == '男' ? 1 : 0
      });
      this.getuserinfo();
      this.$refs.genderRef.close();
    },
    // 选择出生日期
    chooseburndate() {
      this.$refs.burnRef.open();
    },
    // 出生日期改变
    burndateChange(e) {
      this.userinfo.birthday = this.years[e.detail.value[0]] + '-' + this.months[e.detail.value[1]];
    },
    // 确认出生年月
    async fnokburn() {
      await uni.$http.post('user/profile', {
        birthday: String(new Date(this.userinfo.birthday).getTime() / 1000),
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
      this.getuserinfo();
      this.$refs.burnRef.close();
    },
    //保存手机号
    async savephone() {
      await uni.$http.post('user/profile', {
        phone: this.userinfo.phone,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
      this.getuserinfo();
    },
    // 点击身高打开弹框
    choosetall() {},
    // 身高发生改变
    tallchange(e) {
      this.userinfo.height = this.tallList[e.detail.value];
    },
    // 点击确认身高
    async fnoktail() {
      await uni.$http.post('user/profile', {
        height: this.userinfo.height.split('cm')[0],
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
      this.getuserinfo();
      this.$refs.tailRef.close();
    },
    // 学历改变
    leavalchange(e) {
      this.userinfo.education = this.leavalList[e.detail.value];
    },
    // 点击确认保存学历
    async fnokeducation() {
      let education = 1;
      if (this.userinfo.education == '高中及以下') {
        education = 1;
      } else if (this.userinfo.education == '大专') {
        education = 2;
      } else if (this.userinfo.education == '本科') {
        education = 3;
      } else if (this.userinfo.education == '硕士') {
        education = 4;
      } else if (this.userinfo.education == '硕士以上') {
        education = 5;
      }
      await uni.$http.post('user/profile', {
        education,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
      this.getuserinfo();
      this.$refs.leavalRef.close();
    },
    // 保存学校
    saveschool() {
      uni.$http.post('user/profile', {
        school: this.userinfo.school,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
    },
    // 昵称改变
    nickname() {
      uni.$http.post('user/profile', {
        nickname: this.userinfo.nickname,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
    },
    // 婚姻改变
    mearrchange(e) {
      this.userinfo.marital = this.mearrList[e.detail.value];
    },
    // 点击确认婚姻变化
    async fnokmarray() {
      await uni.$http.post('user/profile', {
        marital: this.userinfo.marital,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
      this.getuserinfo();
      this.$refs.mearrRef.close();
    },
    // 职业变化
    carerrchange(e) {
      this.userinfo.career = this.careerList[e.detail.value];
    },

    // 点击确认职业变化
    async fnokcarrerd() {
      await uni.$http.post('user/profile', {
        career: this.userinfo.career,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
      this.getuserinfo();
      this.$refs.carerrRef.close();
    },
    // 保存公司
    savecompaney() {
      uni.$http.post('user/profile', {
        company: this.userinfo.company,
        token: JSON.parse(uni.getStorageSync('userinfo')).token
      });
      this.getuserinfo();
    },
    // 市区变化
    areachange(e) {
      // console.log('市----', e.detail.value);
      // console.log('省-----', this.provinceData[e.detail.value[0]].name);
      this.userinfo.residence_province = this.provinceData[e.detail.value[0]].name;
      // console.log('市----', this.provinceData[e.detail.value[0]].city[e.detail.value[1]].name);
      this.userinfo.residence_city = this.provinceData[e.detail.value[0]].city[e.detail.value[1]].name;
      console.log(this.userinfo.residence_province, this.userinfo.residence_city);
    },
    // 市区变化确认
    async fnokarea() {
      await uni.$http.post('user/profile', {
        residence_province: this.userinfo.residence_province,
        residence_city: this.userinfo.residence_city
      });
      this.getuserinfo();
      this.$refs.areaRef.close();
    }
  },
  computed: {
    cityData() {
      return this.provinceData.filter((item) => {
        return item.name == this.userinfo.residence_province;
      });
    }
  }
};
</script>

<style lang="less">
.container {
  background-color: #fff;
  margin-top: 14rpx;
  .commonstyle {
    width: 750rpx;
    height: 110rpx;
    background: #ffffff;
    box-sizing: border-box;
    padding: 0 30rpx 0 40rpx;
    margin-top: 5rpx;
  }
  .commontip {
    color: #ff1919;
  }
  .avatar {
    width: 750rpx;
    height: 110rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
  .gender {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .imagebox {
    width: 750rpx;
    height: 360rpx;
    background: #ffffff;

    .imageboxitem {
      width: 750rpx;
      height: 120rpx;
      background: #ffffff;
      text-align: center;
      line-height: 120rpx;
      font-size: 28rpx;
      color: black;
      border-radius: 20rpx 20rpx 0rpx 0rpx;
    }
  }
  .genderbox {
    width: 750rpx;
    height: 524rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
    .genderboxtitle {
      display: flex;
    }
    .btngender {
      width: 670rpx;
      height: 90rpx;
      color: #fff;
      background: linear-gradient(180deg, #0398ff 0%, #21e5ff 100%);
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
  }
}
</style>
